<!--
 * @Author: ssj
 * @Date: 2021-06-26 17:51:15
 * @LastEditors: wiz
 * @LastEditTime: 2023-11-07 16:02:16
 * @Description: 上传文件框cell
-->
<template>
  <div class="o-file-viewer">
    <div class="file-scrollview">
      <div
        class="file"
        v-for="(item, idx) of G_value.fileList"
        :key="idx"
        v-viewer="{ url: 'data-src' }"
      >
        <img
          class="file-image"
          v-if="$utils.getFileType(item.name) === 'image'"
          :src="$utils.getFileSrc(item.id)"
          :title="item.name"
          :data-src="$utils.getFileSrc(item.id, false)"
        />
        <div class="file-unknown" v-else>
          <span @click="openFile($event, item)">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <Modal
      v-model="G_openDownloadFile"
      :title="$srv.getI18nByPath('vxe.file.download')"
      :loading="true"
      @on-ok="downloadFile"
    >
      <p>
        {{ $srv.getI18nByPath('vxe.file.isDownload') }}：{{
          G_downloadFileInfo.name
        }}
      </p>
    </Modal>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';

interface I_fileInfo {
  id: string;
  name: string;
}

@Component
export default class oFileViewerCell extends Vue {
  @Prop() params: any;

  // 配置
  @Prop() renderOpts: any; // render配置

  @Watch('params') // 监听配置变化
  public onParamsChange(): void {
    this.init();
  }

  private G_openDownloadFile = false;

  // 打开下载面板
  private G_downloadFileInfo: I_fileInfo = {
    id: ``,
    name: ''
  };

  private G_value: {
    fileList: I_fileInfo[];
  } = {
    fileList: []
  }; // 下载文件信息

  mounted() {
    this.init();
  }

  /**
   * @Author: ssj
   * @description: 初始化
   */
  public init() {
    if (this.params.property) {
      this.toJson(this.params.data[this.params.property]);
    } else if (this.params.column) {
      this.toJson(this.params.row[this.params.column.property]);
    }
  }

  /**
   * @Author: ssj
   * @description: 下载文件
   */
  private downloadFile() {
    if (this.G_downloadFileInfo.id) {
      Tsrv.utils.downloadFile(
        Tsrv.utils.getFileSrc(this.G_downloadFileInfo.id, false),
        this.G_downloadFileInfo.name
      );
    }
    this.G_openDownloadFile = false;
    // Tsrv.httpReqV1
    //   .loadFile({
    //     fileId: this.G_downloadFileInfo.id,
    //     isThumbnail: false
    //   })
    //   .then(res => {
    //     this.G_openDownloadFile = false;
    //     const data = res.data;
    //     if (data.success) {
    //       Tsrv.utils.downloadFileByBase64(
    //         data.data,
    //         this.G_downloadFileInfo.name
    //       );
    //     }
    //   });
  }

  /**
   * @Author: ssj
   * @param {any} ev
   * @param {I_fileInfo} file 文件信息
   * @description: 打开文件
   */
  private openFile(ev: any, file: I_fileInfo) {
    const type = Tsrv.utils.getFileType(file.name);
    if (type === 'image') {
      Tsrv.utils.createModal('o-image-viewer', {
        id: file.id,
        name: file.name
      });
    } else {
      this.G_downloadFileInfo = file;
      this.G_openDownloadFile = true;
    }
  }

  /**
   * @Author: ssj
   * @param {any} value 值
   * @description: 解析json
   */
  private toJson(value: any) {
    if (typeof value === 'string') {
      try {
        const json = JSON.parse(value);
        this.G_value.fileList = json['fileList'] || [];
      } catch {
        this.G_value.fileList = [];
        console.info('unable to read file list');
      }
    } else if (typeof value === 'object' && value !== null) {
      this.G_value.fileList = value['fileList'] || [];
    } else {
      this.G_value.fileList = [];
    }
  }
}
</script>

<style scoped lang="scss">
.o-file-viewer {
  display: flex;
  align-items: center;
  height: 32px;
  overflow: hidden;
  .file-scrollview {
    flex: 1;
    height: 100%;
    overflow: hidden;

    .file {
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      img {
        height: 100%;
        cursor: pointer;
        padding: 7px 0;
      }
      .file-unknown {
        span {
          text-decoration: underline;
          color: var(--default-hover-font-color);
          cursor: pointer;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
